<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Transparent Glass with Shadow</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Transparent Glass with Shadow</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#mygraphiccontainer {
    top: 20px;
    left: 20px;
    position: relative;
    width: 680px;
    height:500px;
}
.example {
    background: url(../assets/graphics/img/curtain.png) no-repeat center;
}
</style>
<div class="intro">
<p>
In this advanced example, we'll create a glass of milk by layering transparent gradients. Since gradient opacity does not work in IE <= 8, there will be a noticeable degradation in those browsers.
</p>
</div>
<div class="example">
<div id="mygraphiccontainer"></div>
<script>
    YUI({filter:"raw"}).use('graphics', function (Y) 
    { 
        var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
        var shadow = mygraphic.addShape({
            type: "ellipse",
            stroke: {
                color: "#ddd",
                weight: 0
            },
            fill: {
                type: "radial",
                stops: [
                    {color: "#000", opacity: 0.7, offset: 0},
                    {color: "#000", opacity: 0.4, offset: 0.5},
                    {color: "#000", opacity: 0.1, offset: 0.7}
                ],
                cx: .6,
                cy: .6,
                fx: 0.1,
                fy: 0.3,
                r: 0.8
            },
            width: 280,
            height: 20,
            x:318,
            y:420
        });

        var milk = mygraphic.addShape({
            x: 314,
            y: 180,
            type: "rect",
            stroke: {
                color:"#6c3f27",
                weight: 1,
                opacity:0.3
            },
            fill: {
                type: "linear",
                rotation: 0,
                stops: [
                    {color: "#d1c4bd", opacity:0.9, offset: 0},
                    {color: "#a78c7e", opacity: 0.9, offset: 0.4},
                    {color: "#6c3f27", opacity: 0.9, offset: 0.7}
                ]
            },
            width:142,
            height:230
        });
			
        var myrect = mygraphic.addShape({
            x: 310,
            y: 110,
            type: "rect",
            stroke: {
                color:"#90ad8c",
                weight: 1,
                opacity:0.6
            },
            fill: {
                type: "linear",
                rotation: 90,
                stops: [
                    {color: "#90ad8c", opacity:0.3, offset: 0},
                    {color: "#819c7d", opacity: 0.3, offset: 0.8},
                    {color: "#40563d", opacity: 0.7, offset: 1.0}
                ]
            },
            width:150,
            height:325
        });

        var reflect = mygraphic.addShape({
            x: 310,
            y: 113,
            type: "rect",
            stroke: {
                color:"#90ad8c",
                weight: 1,
                opacity:0.0
            },
            fill: {
                type: "linear",
                rotation: 0,
                stops: [
                    {color: "#fff", opacity:0.0, offset: 0.2},
                    {color: "#fff", opacity: 0.4, offset: 0.3},
                    {color: "#fff", opacity: 0.0, offset: 0.4}
                ]
            },
            width:150,
            height:318
        });
    });
</script>

</div>
<h2>HTML</h2>
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;</pre>


<h2>CSS</h2>
<pre class="code prettyprint">#mygraphiccontainer {
    top: 20px;
    left: 20px;
    position: relative;
    width: 680px;
    height:500px;
}
.example {
    background: url(..&#x2F;assets&#x2F;graphics&#x2F;img&#x2F;curtain.png) no-repeat center;
}</pre>


<h2>Javascript</h2>

<p>Create a <code>Graphic</code> instance</p>
<pre class="code prettyprint">var mygraphic = new Y.Graphic({render:&quot;#mygraphiccontainer&quot;});</pre>


<p>Create a radial gradient to act as a shadow for the glass.</p>

<pre class="code prettyprint">var mygraphic = new Y.Graphic({render:&quot;#mygraphiccontainer&quot;});
var shadow = mygraphic.addShape({
    type: &quot;ellipse&quot;,
    stroke: {
        color: &quot;#ddd&quot;,
        weight: 0
    },
    fill: {
        type: &quot;radial&quot;,
        stops: [
            {color: &quot;#000&quot;, opacity: 0.7, offset: 0},
            {color: &quot;#000&quot;, opacity: 0.4, offset: 0.5},
            {color: &quot;#000&quot;, opacity: 0.1, offset: 0.7}
        ],
        cx: .6,
        cy: .6,
        fx: 0.1,
        fy: 0.3,
        r: 0.8
    },
    width: 280,
    height: 20,
    x:318,
    y:420
});</pre>


<p>Create a rectangle with a linear gradient for the chocolate milk.</p>

<pre class="code prettyprint">var milk = mygraphic.addShape({
    x: 314,
    y: 180,
    type: &quot;rect&quot;,
    stroke: {
        color:&quot;#6c3f27&quot;,
        weight: 1,
        opacity:0.3
    },
    fill: {
        type: &quot;linear&quot;,
        rotation: 0,
        stops: [
            {color: &quot;#d1c4bd&quot;, opacity:0.9, offset: 0},
            {color: &quot;#a78c7e&quot;, opacity: 0.9, offset: 0.4},
            {color: &quot;#6c3f27&quot;, opacity: 0.9, offset: 0.7}
        ]
    },
    width:142,
    height:230
});</pre>


<p>Add another linear gradient rectangle for the glass.</p>

<pre class="code prettyprint">var myrect = mygraphic.addShape({
    x: 310,
    y: 110,
    type: &quot;rect&quot;,
    stroke: {
        color:&quot;#90ad8c&quot;,
        weight: 1,
        opacity:0.6
    },
    fill: {
        type: &quot;linear&quot;,
        rotation: 90,
        stops: [
            {color: &quot;#90ad8c&quot;, opacity:0.3, offset: 0},
            {color: &quot;#819c7d&quot;, opacity: 0.3, offset: 0.8},
            {color: &quot;#40563d&quot;, opacity: 0.7, offset: 1.0}
        ]
    },
    width:150,
    height:325
});</pre>

<p>Create the linear gradient for the reflection.</p>
<pre class="code prettyprint">var reflect = mygraphic.addShape({
    x: 310,
    y: 113,
    type: &quot;rect&quot;,
    stroke: {
        color:&quot;#90ad8c&quot;,
        weight: 1,
        opacity:0.0
    },
    fill: {
        type: &quot;linear&quot;,
        rotation: 0,
        stops: [
            {color: &quot;#fff&quot;, opacity:0.0, offset: 0.2},
            {color: &quot;#fff&quot;, opacity: 0.4, offset: 0.3},
            {color: &quot;#fff&quot;, opacity: 0.0, offset: 0.4}
        ]
    },
    width:150,
    height:318
});</pre>

<h2>Complete Example Source</h2>
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;
&lt;script&gt;
    YUI({filter:&quot;raw&quot;}).use(&#x27;graphics&#x27;, function (Y) 
    { 
        var mygraphic = new Y.Graphic({render:&quot;#mygraphiccontainer&quot;});
        var shadow = mygraphic.addShape({
            type: &quot;ellipse&quot;,
            stroke: {
                color: &quot;#ddd&quot;,
                weight: 0
            },
            fill: {
                type: &quot;radial&quot;,
                stops: [
                    {color: &quot;#000&quot;, opacity: 0.7, offset: 0},
                    {color: &quot;#000&quot;, opacity: 0.4, offset: 0.5},
                    {color: &quot;#000&quot;, opacity: 0.1, offset: 0.7}
                ],
                cx: .6,
                cy: .6,
                fx: 0.1,
                fy: 0.3,
                r: 0.8
            },
            width: 280,
            height: 20,
            x:318,
            y:420
        });

        var milk = mygraphic.addShape({
            x: 314,
            y: 180,
            type: &quot;rect&quot;,
            stroke: {
                color:&quot;#6c3f27&quot;,
                weight: 1,
                opacity:0.3
            },
            fill: {
                type: &quot;linear&quot;,
                rotation: 0,
                stops: [
                    {color: &quot;#d1c4bd&quot;, opacity:0.9, offset: 0},
                    {color: &quot;#a78c7e&quot;, opacity: 0.9, offset: 0.4},
                    {color: &quot;#6c3f27&quot;, opacity: 0.9, offset: 0.7}
                ]
            },
            width:142,
            height:230
        });
			
        var myrect = mygraphic.addShape({
            x: 310,
            y: 110,
            type: &quot;rect&quot;,
            stroke: {
                color:&quot;#90ad8c&quot;,
                weight: 1,
                opacity:0.6
            },
            fill: {
                type: &quot;linear&quot;,
                rotation: 90,
                stops: [
                    {color: &quot;#90ad8c&quot;, opacity:0.3, offset: 0},
                    {color: &quot;#819c7d&quot;, opacity: 0.3, offset: 0.8},
                    {color: &quot;#40563d&quot;, opacity: 0.7, offset: 1.0}
                ]
            },
            width:150,
            height:325
        });

        var reflect = mygraphic.addShape({
            x: 310,
            y: 113,
            type: &quot;rect&quot;,
            stroke: {
                color:&quot;#90ad8c&quot;,
                weight: 1,
                opacity:0.0
            },
            fill: {
                type: &quot;linear&quot;,
                rotation: 0,
                stops: [
                    {color: &quot;#fff&quot;, opacity:0.0, offset: 0.2},
                    {color: &quot;#fff&quot;, opacity: 0.4, offset: 0.3},
                    {color: &quot;#fff&quot;, opacity: 0.0, offset: 0.4}
                ]
            },
            width:150,
            height:318
        });
    });
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Shows how to create a Graphic instance and add shapes.">
                                        <a href="graphics-simple.html">Basic Graphics Implementation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to draw lines and polygons.">
                                        <a href="graphics-path.html">Basic Path</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create linear and radial gradient fills.">
                                        <a href="graphics-gradients.html">Create Gradient Fills</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to add drag to a shape.">
                                        <a href="graphics-drag.html">Basic drag with graphic object</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to apply transforms to shape.">
                                        <a href="graphics-transforms.html">Using Transforms</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use a custom shape with the Graphics module.">
                                        <a href="graphics-customshape.html">Custom Shape</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a realistic glass.">
                                        <a href="graphics-muddyglass.html">Transparent Glass with Shadow</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a violin.">
                                        <a href="graphics-violin.html">Complex Drawing: Violin</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
